<section class="menu-body" [class]="{'menu-extended': menuExtended}">
  <div class="brand">
    <div class="brand-content">
      <a class="brand-logo" [routerLink]="['/']">
        <img alt="logo" class="logo" src="assets/logo/logo.svg">
        <img alt="brand" class="brand" src="assets/logo/featbit-logo-text.svg" >
      </a>
      <a class="icon-fold" (click)="toggleMenuMode()">
        <i nz-icon nzType="icons:icon-fold"></i>
      </a>
    </div>
  </div>
  <div class="menu-list">
    <ul nz-menu [nzMode]="menuExtended ? 'inline' : 'vertical'">
      <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
      <ng-template #menuTpl let-menus>
        <ng-container *ngFor="let menu of menus">
          <ng-container *ngIf="menu.line;else menuItem">
            <div class="menu-item-line">
              <div class="line"></div>
            </div>
          </ng-container>
          <ng-template #menuItem>
            <li
              *ngIf="!menu.children && !menu.hide"
              nz-menu-item
              nzMatchRouter
              [nzPaddingLeft]="32"
              [nzDisabled]="menu.disabled"
              [nzSelected]="menu.selected">
              <ng-container *ngIf="menuExtended; else menuItemWithTooltip">
                <a class="menu-item" [routerLink]="menu.path" *ngIf="menu.path; else targetMenuItem">
                  <i nz-icon [nzType]="menu.icon"></i>
                  <span class="menu-item-title">{{ menu.title }}</span>
                </a>
              </ng-container>
              <ng-template #menuItemWithTooltip>
                <a [routerLink]="menu.path" *ngIf="menu.path; else targetMenuItem" [nz-tooltip]="menu.title" nzTooltipPlacement="top">
                  <i nz-icon [nzType]="menu.icon"></i>
                  <span class="menu-item-title">{{ menu.title }}</span>
                </a>
              </ng-template>
              <ng-template #targetMenuItem>
                <ng-container *ngIf="menuExtended; else targetMenuItemWithTooltip">
                  <a target="_blank" [href]="menu.target">
                    <i nz-icon [nzType]="menu.icon"></i>
                    <span class="menu-item-title">{{ menu.title }}</span>
                  </a>
                </ng-container>
              </ng-template>
              <ng-template #targetMenuItemWithTooltip>
                <ng-container>
                  <a target="_blank" [href]="menu.target" [nz-tooltip]="menu.title" nzTooltipPlacement="top">
                    <i nz-icon [nzType]="menu.icon"></i>
                    <span class="menu-item-title">{{ menu.title }}</span>
                  </a>
                </ng-container>
              </ng-template>
            </li>
            <li
              *ngIf="menu.children && !menu.hide"
              nz-submenu
              [nzPaddingLeft]="32"
              [nzOpen]="menu.open"
              [nzTitle]="menu.title"
              [nzIcon]="menu.icon"
              [nzDisabled]="menu.disabled">
              <ul>
                <ng-container
                  *ngTemplateOutlet="menuTpl;
                  context: { $implicit: menu.children }">
                </ng-container>
              </ul>
            </li>
          </ng-template>
        </ng-container>
      </ng-template>
    </ul>
  </div>
  <div class="menu-item-line">
    <div class="line"></div>
  </div>
  <div class="organization-management">
    <button nzType="text" nz-button nz-dropdown [nzDropdownMenu]="menu" nzPlacement="topCenter">
      <span class="icon-text-btn">
        <i nz-icon nzType="icons:icon-setting"></i>
        <span class="menu-item-title" i18n="@@common.account">Account</span>
      </span>
    </button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu class="dropdown-menu">
        <li class="centered">
          {{ profile.email }}
        </li>
        <li class="line-container">
          <span class="line"></span>
        </li>
        <li nz-menu-item (click)="openFeedbackModal()">
          <span class="menu-item">
            <i nz-icon nzType="question-circle" nzTheme="outline"></i>
            <ng-container i18n="@@common.feedback">Feedback</ng-container>
          </span>
        </li>
        <li *ngIf="isInitialized" nz-menu-item [routerLink]="['/workspace/profile']">
          <span class="menu-item">
            <i nz-icon nzType="icons:icon-user"></i>
            <ng-container i18n="@@common.profile">Profile</ng-container>
          </span>
        </li>
        <li nz-menu-item (click)="logout.emit()">
          <span class="menu-item">
            <i nz-icon nzType="icons:icon-logout"></i>
            <ng-container i18n="@@common.logout">Logout</ng-container>
          </span>
        </li>
        <li class="line-container bottom">
          <span class="line"></span>
        </li>
        <li class="centered">
          <app-locale-switcher></app-locale-switcher>
        </li>
      </ul>
    </nz-dropdown-menu>
  </div>
</section>

<nz-modal [nzVisible]="feedbackModalVisible"
          [nzTitle]="feedbackModalTitle"
          [nzCentered]="true"
          [nzContent]="feedbackModalContent"
          [nzFooter]="feedbackModalFooter"
          (nzOnCancel)="feedbackModalVisible=false">
  <ng-template #feedbackModalTitle><ng-container i18n="@@common.send-feedback">Send feedback</ng-container></ng-template>
  <ng-template #feedbackModalContent>
    <form nz-form [formGroup]="feedbackForm" nzLayout="vertical">
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@common.email">Email</nz-form-label>
        <nz-form-control nzHasFeedback i18n-nzErrorTip="@@common.email-invalid" nzErrorTip="Invalid Email">
          <input nz-input formControlName="email" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@common.message">Message</nz-form-label>
        <nz-form-control nzHasFeedback nzErrorTip="Message is mandatory" i18n-nzErrorTip="@@common.message-mandatory">
          <textarea nz-input formControlName="message" i18n-placeholder="@@common.message-placeholder" placeholder="Have you any feedback for us?">
          </textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>

  <ng-template #feedbackModalFooter>
    <button nz-button nzType="default" (click)="feedbackModalVisible=false" i18n="@@common.cancel">Cancel</button>
    <button nz-button nzType="primary" [nzLoading]="sendingFeedback" [disabled]="feedbackForm.invalid" (click)="sendFeedback()" i18n="@@common.send">Send</button>
  </ng-template>
</nz-modal>


